<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<title></title>
<style>
body{
        background-color: #ececec;
}
.li_div_box{
        width:100%;
        height:4rem;
        border-bottom: solid 0.05rem#ececec;
        background-color: #fff;
        display: flex;
        flex-direction: row;
  }
.box_img{
        width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: crimson;
    margin: 0.5rem 0.3rem;
    float: left;
}
.name_and_sign{
        display: flex;
        flex-direction: column;
        margin-left: 0.3rem;
       
}
.name{
        margin-top: 0.7rem;
        font-size: 0.9rem;
        font-weight: bold;
}.sign{
        font-size: 0.7rem;
        color: #787878;
        font-family:微软雅黑;
        width: 80%;
        overflow: hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
}
.but_yes{
        float: right;
        float: right;
        border: solid 0.05rem #d2d2d2;
        background-color: #fff;
        margin-right: -10rem;
        
        margin-top: 1.2rem;
        height: 1.5rem;
        width: 3.2rem;
        /* text-align: center; */
        color: #999999;
}
.but_yes span{
        float: left;
        margin: 0 -0.4rem;
}
.friend_table{
        position: absolute;
        top: 3.5rem;width:100%;
}
.search_int{
        border: solid 0.04rem #d2d2d2;
    border-radius: 0.35rem;
    background-color: transparent;
    width: 90%;
    /* margin-left: -2.5rem; */
    height: 1.5rem;
}
.search_box{
        position: absolute;
    top: 3.5rem;
    /* text-align: center; */
    width: 88%;
    left: 7%;
}


</style>
</head>
<body >
      
                <div id="youquan_tab" >
                                <header id="header" class="aui-bar aui-bar-nav" >
                                                <i class="aui-iconfont aui-icon-left"  style="float:left;margin: 0.5rem;" onclick="api.closeWin()"></i>
                                    <div class="aui-title">关注</div>
                                    
                                </header>
                             
                            </div>
                        
                            
                <!-- <div class="search_box" >

                         <input class="search_int" value="asfadgs"/>
                        <span class="aui-iconfont aui-icon-search" style=" float: right;font-size: 1rem; color: #d2d2d2;;" ></span>
                </div> -->

                <div class="friend_table">
                        <ul id="ul_guanzhuderen">
                                
                                <!-- <li>
                                        <div class="li_div_box">
                                              <div class="box_img"> <img></div>
                                               <div class="name_and_sign">
                                                       <span class="name">sdfsgserhystj</span>
                                                       <span class="sign">asdsdfsgsreghethdfshdhd</span>
                                               </div> 
                                               <div style="position: absolute;right: 10.5rem;">
                                                        <button class="but_yes"><span >√&nbsp;已关注</span></button>
                                               </div>
                                        </div>
                                </li> -->
                                <li>

                                </li>
                                <li>

                                </li>
                                <li>

                                </li>

                        </ul>

                </div>

        

</body>
<script>
 apiready = function() {



        var token = $api.getStorage('token');
 	var token = {
                token: token,
                categry:'get_follow',

            };
        api.ajax({
            url: 'http://www.mk517.com/webApi/youquans.php',
            method: 'post',
            "headers": {
                "Content-Type": "application/json"
            },
            dataType: "json",
            data: {
                body: token
            }
        }, function(ret, err) {
            // alert(JSON.stringify(ret));
            if (ret) {
                    for(var i=0;i<ret.length;i++){
                        $api.byId('ul_guanzhuderen').innerHTML+='<li>'+
                                        '<div class="li_div_box">'+
                                              '<div class="box_img"> <img src="'+ret[i]['head_img']+'"></div>'+
                                               '<div class="name_and_sign">'+
                                                      ' <span class="name">'+ret[i]['name']+'</span>'+
                                                       '<span class="sign">'+ret[i]['sign']+'</span>'+
                                               '</div>' +
                                              ' <div style="position: absolute;right: 10.5rem;">'+
                                                       ' <button class="but_yes"><span >√&nbsp;已关注</span><input type="hidden" value="'+ret[i]['id']+'" /></button>'+
                                               '</div>'+
                                        '</div>'+
                                '</li>'    
                    }
            
             }else {
                alert(JSON.stringify(err));
            }
        });

        $('body').on('click','.but_yes',function(){
                if(window.confirm('你确定要取消关注吗？')){
                      var  id=$(this).children('input').val();
                      var str=$(this).parent('div').parent('div').parent('li');
                 //alert("确定");
                 var token = $api.getStorage('token');
                    var token = {
                                token: token,
                                do:'follow_del',
                                to:id
                            };
                 api.ajax({
                            url: 'http://www.mk517.com/webApi/youquan_do.php',
                            method: 'post',
                            "headers": {
                                "Content-Type": "application/json"
                            },
                            dataType: "json",
                            data: {
                                body: token
                            }
                        }, function(ret, err) {
                            // alert(JSON.stringify(ret));
                            if (ret) {
                                if(ret.sta==1){
                                    alert('取消成功!');
                                    str.css("display","none");
                                }else{
                                    alert('失败!');
                                }
                          
                                
                            }else {
                                alert(JSON.stringify(err));
                            }
                
                
                       
                        });



              }else{
                 //alert("取消");
                 return false;
             }
                });

        
 }

</script>
</html>